<template>
	<div class="main">
		<div class="user">
			<div class="user-avatar">
				<img v-if="lawyerData.avatar" :src="baseUrl+'/static/upload/lawyer/'+lawyerData.avatar">
				<img v-else  src="@/assets/images/wechat/index/public/logo.jpg">
			</div>
			<div class="user-name">{{lawyerData.name}}</div>
		</div>
		<div class="prompt">
			<div class="prompt-title">-提示-</div>
			<ul>
				<li>
					<div class="prompt-img"><img src="@/assets/images/wechat/leader/authorizeinfo/icon02.png"></div>
					<div class="prompt-conent">授权后将获取你的微信公开信息（头像，昵称等）</div>
				</li>
				<li>
					<div class="prompt-img"><img src="@/assets/images/wechat/leader/authorizeinfo/icon02.png"></div>
					<div class="prompt-conent">在授权绑定后，你将可以使用微信一键登录，收到平台下发的通知消息等</div>
				</li>
				<li>
					<div class="prompt-img"><img src="@/assets/images/wechat/leader/authorizeinfo/icon02.png"></div>
					<div class="prompt-conent">请及时关注，避免错过平台互动信息</div>
				</li>
				
			</ul>

		</div>
		<div class="authorize">
			<ul>
				<li>
					<div class="authorize-title">授&nbsp;&nbsp;&nbsp;权</div>
					<div class="authorize-sign">
						<div @click="ajaxUpdateLawyer()" class="authorize-sign-active">{{lawyerData.wechat?'取消授权':'点击授权'}}</div>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
//引入js	
import router from '@/router/index'
import { getOpenid, lawyerFindLawyerById,lawyerBindWechatById } from '@/api/lawyer'
	
export default {
	components: {
	},
    data(){
		return {
			baseUrl:process.env.VUE_APP_BASE_API,
			appId:"",
			lawyerData:{}
		}
    },
    created:async function(){
		//获取appid
		this.appId=this.$store.state.globalData.wechatConfig.appId
		//获取url地址
		var url = window.location.href;
		//获取code
		var code=this.getQueryString("code");
		//code不存在则开始授权处理
		if(!code)
		{
			window.location="https://open.weixin.qq.com/connect/oauth2/authorize?appid="+this.appId+"&redirect_uri="+encodeURIComponent(url)+"&response_type=code&scope=snsapi_userinfo#wechat_redirect";
			return 0;
		}
		
		var ajaxData = {}
		var resultData = await lawyerFindLawyerById(ajaxData)
		if(resultData.code==200){
			this.lawyerData=resultData.data
			if(this.lawyerData.wechat==0){
				this.ajaxGetOpenid(code)
			}
		}
  	},
  	beforeMount: function() {
		
    },
  	mounted: function () {
  		
  	},
  	methods:{
		// 获取地址栏参数
		getQueryString:function(name) {
			let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
			let url = window.location.search.substr(1).match(reg);
			return url ? decodeURI(url[2]) : null;
		},
		ajaxGetOpenid:async function(code){
			//拿到token
			var ajaxData={}
			ajaxData.code=code
			var resultData=await getOpenid(ajaxData)
			
			if(resultData.code==200)
			{
				this.lawyerData.openid = resultData.data.openid
			}
			else{
				alert("微信授权信息获取失败")
			}
		},
  		ajaxUpdateLawyer:async function(){
			if(!this.lawyerData.openid)
  			{
				alert("授权信息存在缺失");
				return
			}
			var ajaxData={}
			if(this.lawyerData.wechat==0){
				ajaxData.wechat=1
				ajaxData.openid=this.lawyerData.openid
			}
			else{
				ajaxData.wechat=0
			}
			var resultData = await lawyerBindWechatById(ajaxData)
			if(resultData.code==200){
				alert("操作成功")
				this.lawyerData.wechat=ajaxData.wechat
			}else{
				alert("操作失败")
			}
  		}
  	}
}
</script>

<style lang="scss" scoped>
.main{ width:100%;overflow:hidden; position: relative}
.user {
	margin-top:5rem;
}
.user-avatar {
	width: 4rem;
	height: 4rem;
	margin: auto;
}
.user-avatar>img {
	width: 100%;
	height: 100%;
}
.user-name {
	font-size: 1rem;
	line-height: 3rem;
	text-align: center;
	color: #0a0aa5;
}
.prompt {
	width: 80%;
	margin: auto;
	position: relative;
}
.prompt::before {
	content: "";
	position: absolute;
	width: 80%;
	height: 1px;
	background: #e6e6e6;
	left: 10%;
	top: 0rem;
}
.prompt::after {
	content: "";
	position: absolute;
	width: 80%;
	height: 1px;
	background: #e6e6e6;
	left: 10%;
	bottom: -2rem;
}
.prompt>ul {
	width: 100%;
	margin-bottom: 3rem;
}
.prompt>ul>li {
	width: 100%;
	display: flex;
	font-size: 0.75rem;
	line-height: 1rem;
	margin-top: 0.75rem;
}
.prompt>ul>li:first-child {
	margin-top: 0rem;
}
.prompt-title {
	color: #777677;
	line-height: 3rem;
	font-size: 0.875rem;
	text-align: center;
}
.prompt-img {
	width: 0.75rem;
	height: 0.75rem;
	margin-top: 0.125rem;
}
.prompt-img>img {
	width: 100%;
	height: 100%;
}
.prompt-conent {
	width: 95%;
	margin-left: 0.5rem;
	color: #b3b1b3;
}
.authorize {
	width: 80%;
	margin: auto;
}
.authorize>ul {
	width: 100%;
}
.authorize>ul>li {
	width: 100%;
	display: flex;
	font-size: 0.875rem;
	line-height: 2rem;
	margin-top: 0.75rem;
}
.authorize-title {
	width: 40%;
	margin-left: 10%;
}
.authorize-sign {
	width: 40%;
	margin-right: 10%;
}
.authorize-sign>div {
	float: right;
	right: 0px;
	width: 6rem;
	color: #0a0aa4;
	border: 1px solid #0A0AA4;
	box-shadow: 1px 0px 0.5rem 0px #d1d1d1;
	text-align: center;
	border-radius: 0.5rem;
}
.authorize-sign-active {
	background-color: #0a0aa4 !important;
	color: #FFFFFF !important;
}
</style>